<template>
  <div class="login">
    <h3 class="title">您好，请登录</h3>
    <!-- 表单验证 -->
    <div class="content">
      <van-form ref="form">
        <van-field
          v-model="form.mobile"
          class="mobile"
          :rules="rules.mobile"
          placeholder="请输入手机号"
          name="mobile"
        >
          <template #left-icon>
            <i class="iconfont">&#xe606;</i>
          </template>
        </van-field>
        <van-field
          v-model="form.code"
          class="code"
          :rules="rules.code"
          placeholder="请输入验证码"
          name="code"
        >
          <template #left-icon>
            <i class="iconfont">&#xeae6;</i>
          </template>
          <template #button>
            <span @click="getCode" v-if="totaltime === 6">获取验证码</span>
            <span class="code" v-else>倒计时{{ totaltime }}s</span>
          </template>
        </van-field>
      </van-form>
    </div>
    <van-button block color="red" round class="btn" @click="submit"
      >确定</van-button
    >
  </div>
</template>

<script>
import { auLogin } from '../../api/login.js'
import { setlocal, getlocal } from '../../utils/local'
export default {
  data () {
    return {
      totaltime: 6,
      form: {
        mobile: '',
        code: ''
      },
      rules: {
        mobile: [
          { required: true, message: '手机不能为空', trigger: 'onChange' }
          // {
          //   validator: (value, rule) => {
          //     const reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
          //     return reg.test(value)
          //   },
          //   message: '请输入正确的手机号',
          //   trigger: 'onChange'
          // }
        ],
        code: [{ required: true, message: '验证不能为空', trigger: 'onChange' }]
      }
    }
  },
  created () {
    if (getlocal('token')) {
      this.$router.push('/home/my')
    }
  },
  methods: {
    submit () {
      this.$refs.form
        .validate()
        .then(() => {
          console.log('成功')
          auLogin(this.form)
            .then(res => {
              console.log(res)
              setlocal('token', res.data.data.token)
              setlocal('refresh_token', res.data.data.refresh_token)
              this.$store.commit('setIslogin', true)
              this.$router.push('/home/my')
            })
            .catch(() => {
              console.log('失败')
            })
          // myinfo()
          //   .then(res => {
          //     console.log(res)
          //   })
          //   .catch(() => {
          //     console.log('失败')
          //   })
        })
        .catch(() => {
          console.log('失败')
        })
    },
    getCode () {
      // console.log('haha')
      this.$refs.form.validate('mobile').then(() => {
        this.totaltime--
        const timeId = setInterval(() => {
          this.totaltime--
          if (this.totaltime <= 0) {
            clearInterval(timeId)
            this.totaltime = 6
          }
        }, 1000)
        this.$toast.success({
          duration: 5000,
          message: '246810'
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  padding: 0 15px;
  width: 100%;
  // height: 600px;
  height: 100%;
  box-sizing: border-box;
  background-image: linear-gradient(#4e6ef2, rgb(190, 193, 236));
  .title {
    margin: 0 auto;
    // margin-top: 100px;
    padding-top: 100px;
    color: #f4f4f4;
  }
  ::v-deep .van-nav-bar__left,
  ::v-deep .van-nav-bar__right {
    padding-left: 0;
    padding-right: 0;
  }
  .content {
    .mobile {
      margin-top: 20px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
    .code {
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
    }
  }
  .btn {
    margin-top: 20px;
    opacity: 0.8;
  }
}
</style>
